<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
    .box{
        width: 100px;
        height: 100px;
        background-color: skyblue;
        position: fixed;
        left: 0;
        top: 0;
    }

</style>
<body>
    <div class="box"></div>
    <script>
        // 同步和异步
        // setInterval(间歇执行) , setTimeout(执行一次)
        // clearInterval , clearTimeout 清除定时器 两者都能用
        // requestAnimationFrame:动画帧:支持后台
    //     function fn(cb){
    //     setTimeout(function(){
    //         divs.style.left = 500 + 'px';
    //         cb();
    //     },1000)
    //   }
    //   function fn1(cb){
    //     setTimeout(function(){
    //         divs.style.top = 500 + 'px';
    //         cb();
    //     },1000)
    //   }
    //   function fn2(cb){
    //     setTimeout(function(){
    //         divs.style.left = 0 + 'px';
    //         cb();
    //     },1000)
    //   }
    //   function fn3(cb){
    //     setTimeout(function(){
    //         divs.style.top = 0 + 'px';
    //         cb();
    //     },1000)
    //   }
       


    //     fn(function(){
    //         console.log("fn执行完毕了");
    //         fn1(function(){
    //             console.log("fn1执行完毕了");
    //             fn2(function(){
    //                 console.log("fn2执行完毕了");
    //                 fn3(function(){
    //                 console.log("fn3执行完毕了");
    //                 })
    //             })
    //         })
    //     })


        // 一、向右移动
        // 获取方块当前位置left值
        var divs = document.querySelector('.box');
        // divs.style.left // 只能获取行内的样式
        // 获取非行内样式
        //  var timer = setInterval(()=>{
        //     let num = parseInt(getComputedStyle(divs)['left']); // 获取非行内样式
        //     // currentStyle 兼容性IE浏览器
        //     let speed = 15 ;
        //     if(num = 300){
        //         clearInterval(timer)
        //     }else{
        //         divs.style.left = num + speed +'px';
        //     }
        //  },100)

        // 二、向右移动然后向下移动
        function move(divs , target,dir,cb){
            var timer = setInterval(()=>{
            let num = parseInt(getComputedStyle(divs,null)[dir]); // 获取非行内样式
            // currentStyle 兼容性IE浏览器
            let speed = 15 *(target > num ? 1 : -1);
            if(num === target){
                clearInterval(timer)
                cb();
            }else{
                divs.style[dir] = num + speed +'px';
            }
         },1000)
        }
        // 回调地狱
        move(divs,300,'left',function(){
            move(divs,300,'top',function(){
                move(divs,0,'left',function(){
                    move(divs,0,'top',function(){
                        console.log('执行完毕');
                    })
                })
            })
        })


    </script>
</body>
</html>